@import './variables';
@import './list-common';
@import './vendor-prefixes';

/** The mixins below are shared between mat-menu and mat-select */

// menu width must be a multiple of 56px
$mat-menu-overlay-min-width: 112px !default;   // 56 * 2
$mat-menu-overlay-max-width: 280px !default;   // 56 * 5

$mat-menu-item-height: 48px !default;
$mat-menu-side-padding: 16px !default;
$mat-menu-icon-margin: 16px !default;


@mixin mat-menu-base() {
  min-width: $mat-menu-overlay-min-width;
  max-width: $mat-menu-overlay-max-width;
  overflow: auto;
  -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
}

@mixin mat-menu-item-base() {
  @include mat-truncate-line();

  // Needs to be a block for the ellipsis to work.
  display: block;
  line-height: $mat-menu-item-height;
  height: $mat-menu-item-height;
  padding: 0 $mat-menu-side-padding;

  text-align: left;
  text-decoration: none;   // necessary to reset anchor tags

  // Required for Edge not to show scrollbars when setting the width manually. See #12112.
  max-width: 100%;

  &[disabled] {
    cursor: default;
  }

  [dir='rtl'] & {
    text-align: right;
  }

  .mat-icon {
    margin-right: $mat-menu-icon-margin;
    vertical-align: middle;

    svg {
      vertical-align: top;
    }

    [dir='rtl'] & {
      margin-left: $mat-menu-icon-margin;
      margin-right: 0;
    }
  }
}
